<app-input>
    <mat-form-field class="textInput">
        <input i18n-placeHolder="services.form.label.sas.delegatedAuthn" matInput
               placeholder="Add Provider"
               [matChipInputFor]="chipList"
               [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
               matChipInputAddOnBlur="true"
               (matChipInputTokenEnd)="add($event)"
               [matAutocomplete]="auto"
               #providerInput>
        <mat-hint align="end">
            <app-hint></app-hint>
        </mat-hint>
    </mat-form-field>
    <mat-icon style="font-size: medium"
              i18n-matTooltip="services.form.tooltip.sas.delegatedAuthn"
              [matTooltip]="messages.services_form_tooltip_sas_delegatedAuthn">help
    </mat-icon>
    <h5 *ngIf="delegatedAuthn.length > 0">Allowed Providers</h5>
    <mat-chip-list #chipList [selectable]="false">
        <mat-chip *ngFor="let provider of delegatedAuthn" [selectable]="false"
                  removable="true" (removed)="remove(provider)">
            {{ provider }}
            <mat-icon matChipRemove>cancel</mat-icon>
        </mat-chip>
    </mat-chip-list>
</app-input>

<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selection($event);">
    <mat-option *ngFor="let opt of formData.delegatedAuthnProviders" [value]="opt">{{ opt }}</mat-option>
</mat-autocomplete>